﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../scripts/boot.js" type="text/javascript"></script>
    <link href="../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
    <script src="../scripts/miniui/locale/en_US.js" type="text/javascript"></script>
    <style type="text/css">
    .download
    {
        width:45px;height:45px;
        background:url(download.gif) no-repeat 50% 50%;
    }
    </style>
</head>
<body >
    <input id="button1" type="button" value="Loading" onclick="loading()" /><br /><br />
    x: <select id="x2">
                <option value="left">Left</option>
                <option value="center" selected>Center</option>
                <option value="right" >Right</option>
            </select>
    y: <select id="y2">
                <option value="top" selected>Top</option>
                <option value="center" >Center</option>
                <option value="bottom" >Bottom</option>
            </select>
    state: <select id="state">
                <option value="">default</option>
                <option value="success" selected>success</option>
                <option value="info" >info</option>
                <option value="warning" >warning</option>
                <option value="danger" >danger</option>
            </select>
    <input type="button" value="showTips" onclick="showTips()"/>
    <br /><br />
        x: <select id="x">
                    <option value="left">Left</option>
                    <option value="center" >Center</option>
                    <option value="right" selected>Right</option>
                </select>
        y: <select id="y">
                    <option value="top" >Top</option>
                    <option value="middle" >Middle</option>
                    <option value="bottom" selected>Bottom</option>
                </select>
    <input id="button10" type="button" value="Notify" onclick="notify()" /><br /><br />
    <input id="button9" type="button" value="Alert" onclick="alertClick()" /><br /><br />
    <input id="button2" type="button" value="Confirm" onclick="confirmClick()" /><br /><br />
    <input id="button3" type="button" value="Prompt" onclick="promptClick()" /><br /><br />
    <input id="button5" type="button" value="Prompt(Multi-line)" onclick="multiPromptClick()" /><br /><br />
    <input id="button6" type="button" value="Wait" onclick="waitClick()" /><br /><br />
    <input id="button4" type="button" value="YESNOCANCEL" onclick="yesnocancelClick()" /><br /><br />    
    <select id="icons">
        <option value="mini-messagebox-info">Info</option>
        <option value="mini-messagebox-warning">Warning</option>
        <option value="mini-messagebox-question">Question</option>
        <option value="mini-messagebox-error">Error</option>
        <option value="download">Download</option>
    </select>
    <input id="button7" type="button" value="Icons" onclick="iconsClick()" />
    <br /><br />
    <input id="button8" type="button" value="Html" onclick="htmlClick()" /><br />

    <div id="htmlContent" style="padding-left:10px;display:none;">数据加载中...<div style="background:url(wait.gif) no-repeat 0px 50%;width:230px;height:30px;"></div></div>




</body>
</html>
<script type="text/javascript">

    function loading() {
        mini.mask({
            el: document.body,
            cls: 'mini-mask-loading',
            html: '加载中...'
        });
        setTimeout(function () {
            mini.unmask(document.body);
        }, 2000);
    }


    function alertClick() {
        mini.alert("记录已删除！");
    }

    function confirmClick() {
        mini.confirm("确定删除记录？", "确定？",
            function (action) {
                if (action == "ok") {
                    alert("删除!");
                } else {
                    alert("不删除!");
                }
            }
        );
    }
    function promptClick() {

        mini.prompt("请输入订单号：", "请输入",
            function (action, value) {
                if (action == "ok") {
                    alert(value);
                } else {
                    alert("取消");
                }

            }
        );
    }
    function multiPromptClick() {

        mini.prompt("请输入评论内容：", "请输入",
            function (action, value) {
                if (action == "ok") {
                    alert(value);
                } else {
                    alert("取消");
                }
            },
            true
        );
    }
    function waitClick() {
        var messageid = mini.loading("Loading, Please wait ...", "Loading");
        setTimeout(function () {
            mini.hideMessageBox(messageid);
        }, 2500);
    }

    function yesnocancelClick() {
        mini.showMessageBox({
            title: "YESNOCANCEL",
            iconCls: "mini-messagebox-question",
            buttons: ["ok", "no", "cancel"],
            message: "选择：确定，否，取消。",
            callback: function (action) {
                alert(action);
            }
        });
    }

    function iconsClick() {
        var iconCls = document.getElementById("icons").value;
        mini.showMessageBox({
            showHeader: false,
            width: 250,
            title: "自定义图标",
            buttons: ["ok", "cancel"],
            message: "自定义图标",
            iconCls: iconCls,

            callback: function (action) {
                alert(action);
            }
        });
    }

    var htmlContent = document.getElementById("htmlContent");
    function htmlClick() {
        htmlContent.style.display = "";
        mini.showMessageBox({
            width: 250,
            title: "自定义Html",
            buttons: ["ok", "cancel"],
            message: "自定义Html",
            html: htmlContent,
            showModal: false,
            callback: function (action) {
                alert(action);
            }
        });
    }

    function notify() {

        var x = document.getElementById("x").value;
        var y = document.getElementById("y").value;

        mini.showMessageBox({
            showModal: false,
            width: 250,
            title: "提示",
            iconCls: "mini-messagebox-warning",
            message: "记录已删除",
            timeout: 3000,
            x: x,
            y: y
        });
    }
    function showTips() {
        var x = document.getElementById("x2").value;
        var y = document.getElementById("y2").value;
        var state = document.getElementById('state').value;
        mini.showTips({
            content: "<b>成功</b> <br/>数据保存成功",
            state: state,
            x: x,
            y: y,
            timeout: 3000
        });
    }

</script>